<template>
	<div class="login">
		<div class="head">
			<van-image width="100" height="100" round :src="require('../../assets/imgs/熊.jpg')"></van-image>
		</div>
		<van-form @submit="onSubmit" :show-error-message="false">
			<input type="text" value="" style="position:absolute;top:-9999px;">
			<input type="password" value="" style="position:absolute;top:-9999px;">
			<!-- label:表单输入框前面的文本 -->
			<!-- placeholder: 默认提示信息 -->
			<!-- rules:定义表单项的验证规则 -->
			<!-- required：是否必传 -->
			<!-- message:错误提示信息 -->
			<van-field v-model="username" left-icon="phone" placeholder="请输入手机号"
				:rules="[{ required: true, validator:$valid.checkTel, message: '请填写手机号' }]" />
			<van-field v-model="password" type="password" placeholder="密码" left-icon="lock"
				:rules="[{ required: true, message: '请填写密码' }]" />
			<van-checkbox v-model="checked">记住密码</van-checkbox>
			<!-- round:圆角 -->
			<!-- block：宽度100%显示 -->
			<!-- type：规定按钮的颜色 -->
			<div style="margin:0 16px;">
				<van-button block type="info" native-type="submit">登陆</van-button>
			</div>
			<van-divider :style="{ borderColor: '#ddd', padding: '0 16px' }" @click="onRegClick">
				没有账号，去注册
			</van-divider>
		</van-form>
	</div>
</template>
<script>
	export default {
		name: "Login",
		data() {
			return {
				username: '',
				password: '',
				checked: true
			};
		},
		methods: {
			onRegClick() {
				this.$router.push("/reg");
			},
			onSubmit() {
				let api = this.$http.api.auth.login(this.username, this.password);
				this.$http.callApi(api).then(res => {
					// 成功逻辑
					this.$toast.success({
						duration: 600,
						message: "登录成功"
					});
					this.$utils.setLocalStorage("token", res.data);
					setTimeout(_ => this.$router.push("/"), 600);
				}).catch(err => {
					// 失败逻辑
					console.log(err)
				})
			},
		},
	}
</script>
<style lang="less" scoped>
	// 启用less ,scoped 让选择器只在当前组件生效
	.head {
		height: 460px;
		padding-bottom: 100px;
		background-color: @blue-light;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.van-image {
		border: 4px solid #fff;
	}

	// 样式穿透：>>> 报错，要使用/deep/
	.van-cell /deep/ .van-icon {
		color: #aaa;
	}

	.van-form {
		margin: -100px 30px 0;
		background-color: #fff;
		padding: 50px 0 30px;
		border-radius: 20px;
		box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.01);
	}

	.van-checkbox {
		padding: 30px 32px 20px;
		font-size: 28px;
	}
</style>
